<template>
	<swiper :class="show" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
		<swiper-item>
			<view class="emoji_item"><image v-for="(item, index) in emojiObj.map1" :src="emojiObj.path + item" :key="index" @tap="sendEmoji" :data-emoji="index" /></view>
			<view class="emoji_item"><image v-for="(item, index) in emojiObj.map2" :src="emojiObj.path + item" :key="index" @tap="sendEmoji" :data-emoji="index" /></view>
			<view class="emoji_item"><image v-for="(item, index) in emojiObj.map3" :src="emojiObj.path + item" :key="index" @tap="sendEmoji" :data-emoji="index" /></view>
		</swiper-item>
		<swiper-item>
			<view class="emoji_item"><image v-for="(item, index) in emojiObj.map4" :src="emojiObj.path + item" :key="index" @tap="sendEmoji" :data-emoji="index" /></view>
			<view class="emoji_item"><image v-for="(item, index) in emojiObj.map5" :src="emojiObj.path + item" :key="index" @tap="sendEmoji" :data-emoji="index" /></view>
			<view class="emoji_item"><image v-for="(item, index) in emojiObj.map6" :src="emojiObj.path + item" :key="index" @tap="sendEmoji" :data-emoji="index" /></view>
		</swiper-item>
	</swiper>
</template>

<script>
let msgType = require('../../../msgtype');
let EMOJI_STATUS = {
	OPENED: 'showEmoji',
	CLOSED: 'emoji_list'
};
export default {
	components: {},
	props: {},
	data() {
		return {
			show: EMOJI_STATUS.CLOSED,
			emoji: this.$im.Emoji,
			emojiObj: this.$im.EmojiObj,

			interval: 5000,
			duration: 1000,
			autoplay: false,
			indicatorDots: true // 显示面板指示点
		};
	},
	created() {},
	amount() {
		console.log(1);
	},
	onReady() {},

	methods: {
		openEmoji() {
			this.show = EMOJI_STATUS.OPENED;
		},

		cancelEmoji() {
			this.show = EMOJI_STATUS.CLOSED;
		},

		// 输出 emoji
		sendEmoji(event) {
			var emoji = event.target.dataset.emoji;
			this.$emit('newEmojiStr', {
				msg: emoji,
				type: msgType.EMOJI
			});
		}
	}
};
</script>

<style>
.emoji_list {
	display: none;
}

.showEmoji {
	display: show;
	width: 100%;
	height: 300upx;
	background-color: #dddddd;
	padding: 20upx;
	box-sizing: border-box;
}

.emoji_list image,
.showEmoji image {
	width: 52upx;
	height: 52upx;
	margin: 10upx;
}

.emoji {
	width: 52upx;
	height: 52upx;
	margin: 0 0;
}

.emoji_item {
	display: flex;
	justify-content: space-around;
}
</style>
